<script setup lang="tsx">
import { type PlusColumn, PlusDescriptions } from "plus-pro-components";
import { ref } from "vue";
import { getGoodsLogisticListApi } from "@/api/goodsLogisticApi";
import { message } from "@/utils/message";
const info = ref();
const goodsNo = ref();

function search(value) {
  info.value = [];
  getGoodsLogisticListApi({ goodsNo: value })
    .then(res => {
      if (res.result.total > 0) {
        info.value = res.result.list;
      } else {
        message("未查询到此单号", {
          type: "error"
        });
      }
    })
    .catch(error => {
      message(error.response.data.msg ?? "操作失败,请联系管理员", {
        type: "error"
      });
    });
}
//发货单列表
const columns: PlusColumn[] = [
  {
    label: "执行步骤",
    prop: "stepFormat"
  },
  {
    label: "详情",
    prop: "info"
  },
  {
    label: "操作人",
    prop: "operateInfo.nickname"
  },
  {
    label: "企业",
    prop: "corp.name"
  },
  {
    label: "状态",
    prop: "statusFormat"
  },
  {
    label: "操作时间",
    prop: "createdAt"
  }
];
</script>

<template>
  <div>
    <div style="margin-bottom: 10px; margin-right: 30px">
      <el-input
        v-model="goodsNo"
        class="!w-[11vw]"
        placeholder="输入发货单号"
      />
      <el-button @click="search(goodsNo)">查询</el-button>
    </div>
    <div v-for="(item, index) in info" :key="index" class="!w-[28vw]">
      <PlusDescriptions :column="1" :columns="columns" :data="item" />
    </div>
  </div>
</template>
